<template>
  <div v-if="getShow">
    <LoginFormTitle class="enter-x" />
    <Form class="enter-x p-4" ref="formRef">
      <Result
        :status="resultState.Succeeded ? 'success' : 'error'"
        :title="resultState.Succeeded ? t('sys.login.registerSuccess') : t('sys.login.registerFailed')"
        :sub-title="
          resultState.Succeeded
            ? `${resultState.Data.UserName}[${resultState.Data.NickName}]${
                !resultState.Data.Email ? '' : `，${t('sys.login.activationEmail')}`
              }`
            : resultState.Content
        "
      >
        <template #extra>
          <a-button
            key="open"
            type="primary"
            :disabled="!resultState.Data.Email"
            @click="() => openMailSite(resultState.Data.Email)"
          >
            {{ t('sys.login.viewMailbox') }}
          </a-button>
          <a-button key="back" @click="handleBackLogin"> {{ t('sys.login.backSignIn') }} </a-button>
        </template>
      </Result>
      <div class="result-success__content" v-if="resultState.Succeeded">
        <Descriptions :title="t('sys.login.registerSuccessDescTitle')">
          <DescriptionItem :label="t('sys.login.registerSuccessDescExplain')">
            {{ t('sys.login.registerSuccessDescExplainContent') }}
          </DescriptionItem>
        </Descriptions>
        <Steps :current="1" progress-dot size="small">
          <Step :title="t('sys.login.registerSuccessStep1Title')">
            <template #description>
              <div>{{ `${resultState.Data.UserName}[${resultState.Data.NickName}]` }}</div>
              <p>{{ new Date().toLocaleDateString() }}</p>
            </template>
          </Step>
          <Step :title="t('sys.login.registerSuccessStep2Title')">
            <template #description>
              <p>{{ new Date().toLocaleDateString() }}</p>
            </template>
          </Step>
          <Step :title="t('sys.login.registerSuccessStep3Title')" />
          <Step :title="t('sys.login.registerSuccessStep4Title')" />
        </Steps>
      </div>
      <div class="result-error__content" v-if="!resultState.Succeeded">
        <Descriptions>
          <DescriptionItem>{{ '' }}</DescriptionItem>
        </Descriptions>
        <div class="result-error__content-title">t('sys.login.registerFailed')：</div>
        <div class="mb-4">
          <CloseCircleOutlined class="result-error__content-icon mr-2" />
          {{ resultState.Content }}
          <a class="ml-4" @click="handleBackLogin">{{ t('sys.login.backSignIn') }} ></a>
        </div>
      </div>
    </Form>
  </div>
</template>

<script lang="ts" setup>
  import { computed, ref, unref } from 'vue';

  import { useI18n } from '@/hooks/web/useI18n';
  import { openMailSite } from '@/utils/common';
  import { CloseCircleOutlined } from '@ant-design/icons-vue';
  import { Descriptions, Form, Result, Steps } from 'ant-design-vue';

  import LoginFormTitle from './LoginFormTitle.vue';
  import { LoginStateEnum, useLoginState } from './useLogin';

  const Step = Steps.Step;
  const DescriptionItem = Descriptions.Item;

  const { t } = useI18n();
  const { handleBackLogin, getLoginState, getResultState } = useLoginState();

  const formRef = ref();
  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER_RESULT);

  const resultState = computed(() => unref(getResultState));
</script>

<style lang="scss" scoped>
  .result-error {
    padding: 48px 32px;
    background-color: $component-background;

    &__content {
      padding: 24px 40px;
      background-color: $background-color-light;

      &-title {
        margin-bottom: 16px;
        font-size: 16px;
        font-weight: 500;
      }

      &-icon {
        color: #ff4d4f;
      }
    }
  }
</style>
